<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 500px;
				height: 600px;
				border: 1px solid black;
				margin:  20px auto;
				position: relative;
			}
			#time{
				font-size: 25px;
				float: left;
			}
			#score{
				float: right;
				font-size: 30px;
			}
			#start{
				width: 60px;
				height: 40px;
				color: white;
				text-align: center;
				line-height: 40px;
				background: blue;
				position: absolute;
				top: 60px;
				left: 200px;
			}
			#main{
				width: 450px;
				height: 460px;
				position: absolute;
				top: 120px;
				left: 25px;
				text-align: center;
			}
			#img{
				width: 80%;
				height: 80%;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="time">
				游戏时间：60
			</div>
			<div id="score">
				0
			</div>
			<div id="start">
				开始
			</div>
			<div id="main">
				<img src="img/2.png" id="img"/>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var start = document.getElementById("start");
		var img = document.getElementById("img");
		var score = document.getElementById("score");
		var main = document.getElementById("main");
		var time = document.getElementById("time");
		var temp = 1;
		//函数、每次图片的张数
		function chuangJian(){
			temp++;
			var shuLiang = Math.pow(temp,2);
			return shuLiang;
		}
		var panduan = true;
		var timer = 60;
		start.onclick = function(){
			if(panduan){
				var haha = setInterval(function(){
					timer -= 1;
					time.innerHTML = "游戏时间：" + timer;
					if(timer <= 0){
						clearInterval(haha);
						alert("游戏结束");
						main.innerHTML = "";
						temp = 0;
						tuPian();
						panduan = true;
						timer = 60;
						fenshu = 0;
						start.style.background = "blue";
						start.style.color = "black";
						start.innerHTML = "开始";
						time.innerHTML = "游戏时间：60" ;
						score.innerHTML = "0";
					}
				},1000)
				main.innerHTML = "";
				img.style.display = "none";
				start.style.background = "gray";
				start.style.color = "white";
				start.innerHTML = "开始..."
				tuPian();
				panduan = false;
			}
		}
		//函数每次循环创建图片
		function tuPian(){
			var shuliang =  chuangJian();
//			alert(shuliang)
			for(var i = 0;i < shuliang;i++){
				var IMG = document.createElement("img");
				IMG.src = "images/1.png";
				IMG.style.width = 450/temp + "px";
				main.appendChild(IMG);
			}
			var suiji = suijishu(0,shuliang-1);
			main.children[suiji].src = "images/2.png";
			dianji(main.children[suiji]);
		}
		function suijishu(min,max){
			return parseInt(Math.random()*(max-min+1)+min);
		}
		var fenshu = 0;
		function dianji(fangzuming){
			fangzuming.onclick = function (){
				fenshu++;
				score.innerHTML = fenshu;
				main.innerHTML = "";
				tuPian();
			}
		}
	</script>
</html>